﻿<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" style="height: 100px; border-bottom-width: 1px; padding: 10px; font-size: 14px;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="/Datagrid/ViewNavigatingSource" target="_blank">点击查看扩展代码</a>
        <br />
        js依赖项：
        <br />
        [query-1.11.0.js]、[jquery.jdirk.js]、[jquery.easyui.min.js]、[jeasyui.extensions.datagrid.navigating.js]
    </div>
    <div data-options="region:'center',border:false,title:'此处仅显示“功能演示”选项卡所示功能基于本扩展的实现源码'" style="padding: 15px; font-size: 14px;">
        <a href="~/Demos/ExtensionDemos/Datagrid/NavigatingDemo.rar" target="_self">下载本扩展功能演示Demo</a>
        <br />
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            扩展属性API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:15%;">名称</td>
                <td style="width: 10%;">类型</td>
                <td>描述</td>
                <td style="width: 7%;">默认值</td>
            </tr>
            <tr>
                <td>navigatingWithKey</td>
                <td>Boolean 类型</td>
                <td>
                    扩展 easyui-datagrid 的自定义属性；表示是否开启按键导航功能；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Up 键：selected 数据行上移；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Down 键：selected 数据行下移；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Left 键：上一页，仅在有上一页时有效；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Right 键：下一页，仅在有下一页时有效；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Enter 键：触发 datagrid onDblClickRow 事件，仅在有 selected 数据行时有效；<br />
                </td>
                <td>true</td>
            </tr>
            <tr>
                <td>onNavigatePaginate</td>
                <td>Function 类型</td>
                <td>
                    扩展 easyui-datagrid 的自定义事件；表示通过按键导航进行翻页后触发的事件；该事件回调函数提供如下参数：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>paginateType:  表示翻页类型，其值可以是 prev、next，分别表示上一页、下一页；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>data:  表示翻页后的数据对象，该数据对象可能是 object（含 total、rows 属性），也可能是 array；<br />
                    该事件函数中的 this 指向当前 easyui-datarid 的 DOM 对象(非 jQuery 对象)；
                </td>
                <td>一个“select 第一条/最后一条数据行”的 function </td>
            </tr>
            <tr>
                <td>navigateHandler</td>
                <td>Object 类型</td>
                <td>
                    扩展 easyui-datagrid 的自定义对象；表示按键导航执行后触发的事件集合；该对象支持如下事件属性：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>up:  表示“上”按键导航后触发的事件，该事件的函数签名 targetIndex 表示导航后的数据行的索引；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>down:  表示“下”按键导航后触发的事件，该事件的函数签名 targetIndex 表示导航后的数据行的索引；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>enter:  表示“回车”按键导航后触发的事件，该事件的函数签名 selectedData 表示已经 selected 的数据行；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>注意：selectedData 的类型为 object 还是 array 取决于当前 easyui-datagrid 是单选还是多选；<br />
                    以上事件函数中的 this 指向当前 easyui-datarid 的 DOM 对象(非 jQuery 对象)；
                </td>
                <td>一个“select 第一条/最后一条数据行”的 function </td>
            </tr>
        </table>
    </div>
</div>
